<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<title>结算</title>
	<link rel="stylesheet" href="../css/mui.min.css" />
	<link rel="stylesheet" href="../css/common.css" />
	<link rel="stylesheet" href="../iconfont/iconfont.css" />
	<style>
		body {
			background: #F7F7F8;
		}
		
		.col-red {
			color: #FC3A2E;
		}
		
		.yue > div {
			background: #fff;
			height: 43px;
		}
		
		.yue > div[class=mui-col-xs-10] > label:last-child {
			color: #ccc;
			font-size: 12px;
		}
		
		.mui-radio input[type=radio]:before {
			content: '\e441';
			line-height: 35px;
		}
		
		.mui-checkbox input[type=checkbox]:checked:before,
		.mui-radio input[type=radio]:checked:before {
			color: #00ff00;
		}
		
		.zhifufangshi {
			line-height: 38px;
			position: relative;
			overflow-x: hidden;
		}
		
		.zhifufangshi-s:after {
			content: "";
			background: #DCDCDC;
			width: 100%;
			height: 1px;
			position: absolute;
			top: 77px;
			left: 15px;
			display: inline-block;
			z-index: 20;
		}
		
		.icon-weixin {
			color: #42a611;
			font-size: 24px;
			vertical-align: middle;
		}
		
		.icon-zhifubao {
			color: #00aaee;
			font-size: 24px;
			vertical-align: middle;
		}
		
		.zhifufangshi > div {
			background: #FFF;
			padding-left: 15px;
		}
		
		.btn-pay button {
			background: #FC3A2E;
			color: #FFF;
			line-height: 25px;
		}
		.iconfont {
			margin-right: 10px;
		}
		.no-pad-l {
			padding-left: 0 !important;
		}
		.mui-checkbox input[type=checkbox], .mui-radio input[type=radio] {
			top: 15px;
		}
	</style>
</head>

<body>
	<!-- 顶部导航 开始 -->
	<header class="header mui-bar mui-bar-nav bar mui-text-center">
		<a class="mui-pull-left mui-action-back pad-h-md">
			<i class="iconfont icon-back"></i>
		</a>
		<a class="title">结算</a>
	</header>
	<!-- 顶部导航 结束 -->

	<div class="content">
		<!--订单编号-->
		<div class="pad-h pad-v-sm">
			<div class="mui-row">
				<label class="mui-col-xs-12">订单号 <span class="order-no"></span></label>
				<span class="mui-col-xs-12 mui-text-right pad-v">
					合计：<label class="col-red order-total">0.00</label>元
				</span>
			</div>
		</div>
		<!--余额-->
		<div class="mui-row yue mui-hidden">
			<div class="mui-input-row mui-radio mui-left mui-col-xs-2">
				<label>&emsp;</label>
				<input type="radio" name="payway" value="balance">
			</div>
			<div class="mui-col-xs-10">
				<label>您的余额</label>
				<label class="mui-block">您的账户余额为￥0.00</label>
			</div>
		</div>
		<!--支付方式-->
		<div class="mui-row pad-h-sm pad-v-sm">
			<span class="mui-col-xs-12">请选择支付方式</span>
		</div>
		<div class="mui-row zhifufangshi white">
			<div class="mui-col-xs-12 mui-input-row mui-radio pad-v bdr-b">
				<label class="no-pad-l">
					<i class="iconfont icon-weixin"></i>微信支付
				</label>
				<input type="radio" name="payway" value="wxpay" checked="checked">
			</div>
			<div class="mui-col-xs-12 mui-input-row mui-radio pad-v">
				<label class="no-pad-l">
					<i class="iconfont icon-zhifubao"></i>支付宝支付
				</label>
				<input type="radio" name="payway" value="alipay">
			</div>
		</div>
		
		<div class="mui-input-row mui-checkbox white pad-v mgn-v">
			<label>
				余额优先 
				<small class="text-primary num-balance"></small>
				<small class="text-gray frozen-money"></small>
			</label>
			<input name="balance" type="checkbox">
		</div>

		<div class="mui-row mui-text-center pad-v-lg pad-h-lg btn-pay">
			<button class="mui-col-xs-12 no-bdr btn-submit">立即支付</button>
		</div>
	</div>

	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/template.js"></script>
	<script type="text/javascript" src="../js/app.js"></script>
	<script type="text/javascript" src="checkout.payway.js" ></script>
</body>
</html>